<template>
	<!-- 学习区导航 -->
	<view class="guideLayout pageBg">
		<custom-nav-bar title="捐个脑子"></custom-nav-bar>
		<!-- 游戏放松区 -->
		<view class="banner">
			<swiper indicator-dots circular autoplay interval="3000"
			indicator-color="rgba(255, 255, 255, .5)">
				<swiper-item v-for="iten in classifyList" @click="swiperClick" :key="iten.id">
					<image :src="iten.pic" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay circular interval="2000" :duration="300">
					<swiper-item>
						aaa 捐了个脑子
					</swiper-item>
					<swiper-item>
						bbb 头好痒，好像要长脑子了
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<view class="theme">
			<common-title>
				<template #name>长个脑子</template>
				<template #custom>
					<navigator url="" class="more">我的脑子></navigator>
				</template>
			</common-title>
			<view class="curricular">
				<scroll-view class="items" scroll-y :style="{height: navHeight + 'px'}">
					<view class="item" v-for="item in sourseList" :key="item.id">
						<view class="left">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="title">章节{{ item.name }}</view>
							<view class="content">
								{{ item.details }}
								<!-- <view class="chapter" v-for="item in 5">
									<view class="en">{{ item.details }}</view>
									<view class="cn">哈哈哈</view>
								</view> -->
							</view>
							<view class="audio" @click="playAudio(item.audio)">
								<uni-icons type="sound" size="30"></uni-icons>
								<!-- <audio :src="item.audio"></audio> -->
							</view>
							<view class="operate">
								<view class="button" plain @click="playVideo">悄悄看下</view>
								<view class="button">开始挑战</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { getWindowHeight } from '@/utils/system.js'
import {apiGetClassify, apiGetLearn } from '@/api/apis.js'

let navHeight = ref(0);
const classifyList = ref([]);
const sourseList = ref([]);

// 获取课程列表
const getLearn = async() => {
	let res = await apiGetLearn();
	sourseList.value = res.data;
}
// 获取分类列表
const getClassify = async() => {
	let res = await apiGetClassify();
	// console.log(res.data);
	classifyList.value = res.data;
}

const playVideo = () => {
	uni.reLaunch({
		url: '/pages/guide/learn'
	});
}
const swiperClick = () => {
	// uni.navigateTo({
	// 	url:'/pages/game_merit/game_merit'
	// })
}
//音频播放
const innerAudioContext = uni.createInnerAudioContext();
const playAudio = (url) => {
	innerAudioContext.stop();
	innerAudioContext.src = url;
	innerAudioContext.play();
}
onReady(() => {
	getLearn();
	getClassify();

	// 计算滑动窗高度
	let windowHeight = getWindowHeight();
	let titleH=uni.createSelectorQuery().select(".items"); //想要获取高度的元素名（class/id）
	titleH.boundingClientRect(data=>{
		navHeight.value = windowHeight - Math.ceil(data.top);
	}).exec();
})
</script>

<style lang="scss" scoped>
.guideLayout {
	.banner {
		width: 750rpx;
		padding: 30rpx 0;
		swiper {
			width: 750rpx;
			height: 340rpx;
			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
	.notice {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f9f9f9;
		margin: 0 auto;
		border-radius: 10rpx;
		display: flex;
		.left {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.text {
				color: $brand-theme-color;
				font-weight: 600;
				font-size: 28rpx;	
			}
		}
		.center {
			flex: 1;
			swiper {
				height: 100%;
				&-item {
					height: 100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right {
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.theme{
		padding: 30rpx 0 0 0;
		.more{
			font-size: 31rpx;
			color: $brand-theme-color;
		}
		.curricular {
			padding: 0 30rpx;
			.items{
				.item {
					display: flex;
					margin-top: 10rpx;
					background: 
					linear-gradient(to bottom,#fff,transparent 100%),
					linear-gradient(to right,#beecd8 20%,#f4e2d8);
					.left{
						height: 340rpx;
						width: 220rpx;
						padding: 10rpx;
						image{
							width: 100%;
							height: 100%;
							border: 1px solid $border-color;
						}
					}
					.right{
						width: 470rpx;
						height: 340rpx;
						padding: 30rpx 30rpx 0 30rpx;
						position: relative;
						.title{
							
						}
						.content{
							.chapter{
								font-size: 28rpx;
								display: flex;
							}
						}
						.audio{
							padding-top: 10rpx;
							width: 60rpx;
							:deep(){
								.uni-icons{
									color: $brand-theme-color !important;
								}
							}
						}
						.operate{
							width: 100%;
							position: absolute;
							bottom: 10rpx;
							left: 0;
							display: flex;
							padding: 0 30rpx;
							justify-content: space-between;
							.button{
								width: 180rpx;
								height: 60rpx;
								border-radius: 10rpx;
								border: 1px solid $text-font-color-2;
								color: $text-font-color-2;
								font-weight: 600;
								text-align: center;
								line-height: 60rpx;
								&:last-child{
									background: #00cec9;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
